<!--
 * @Author: keledd
 * @Date: 2021-10-29 14:58:18
 * @LastEditors: keledd
 * @LastEditTime: 2021-12-23 15:43:23
 * @FilePath: /letter/src/views/index.vue
-->
<!--  -->
<template>
  <div>
    <div class="list">
      <img
        class="list-item"
        src="../assets/file.png"
        v-for="item in 20"
        :key="item"
        alt=""
      >
    </div>
    <img class="refrush refrush-normal" :style="{transform:`rotate(${rotate}deg)`}" src="../assets/refrush.png" @click="handleRotate">
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, defineComponent, onBeforeMount, onMounted } from 'vue'
interface DataProps {
    rotate:number
 }
export default defineComponent({
  name: 'Home',
  setup() {
    console.log('1-开始创建组件-setup')
    const data: DataProps = reactive({
        rotate:0
    })
    onBeforeMount(() => {
      console.log('2.组件挂载页面之前执行----onBeforeMount')
    })
    onMounted(() => {
      console.log('3.-组件挂载到页面之后执行-------onMounted')
    })
    const handleRotate =()=>{
        data.rotate += 720
        console.log(data.rotate)
    }
    const refData = toRefs(data);
    return {
      ...refData,
      handleRotate
    }

  }
});
</script>
<style scoped lang="scss">
    .list{
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        .list-item{
            width: 64px;
            margin: calc((100% - 4*64px)/8);
            border-radius: 50%;
            cursor: pointer;
            &:hover{
                box-shadow:  0 5px 15px -5px rgba(0,0,0,.5);
                transform: scale(1.1);
            }
        }
    }
    .refrush{
        margin: 20px auto 0;
        width: 40px;
    }
    .refrush-normal{
        transition: all 2s;
    }
</style>